/**
 * Tencent is pleased to support the open source community by making 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
 * Copyright (C) 2017-2019 THL A29 Limited, a Tencent company. All rights reserved.
 * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://opensource.org/licenses/MIT
 * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
 * an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
 * specific language governing permissions and limitations under the License.
 */

@import '../../css/variable.css';
@import '../../css/mixins/ellipsis.css';

.biz-image-detail-title {
    display: inline-block;
    height: 60px;
    line-height: 60px;
    font-size: 16px;
    margin-left: 20px;
}

.biz-image-detail-content-wrapper {
    padding: 20px 20px 0 20px;

    .biz-header-content {
        width: 100%;
        max-width: 100%;
        height: 219px;
        background: rgba(255, 255, 255, 1);
        border-radius: 2px;
        border: 1px solid rgba(221, 228, 235, 1);

        .left-wrapper {
            width: 180px;
            height: 219px;
            border-right: 1px solid rgba(221, 228, 235, 1);
            text-align: center;
            float: left;

            .logo {
                width: 100px;
                height: 100px;
                margin-top: 30px;
                margin-left: 50px;
                border-radius: 50%;
                border: 1px solid rgba(221, 228, 235, 1);

                img {
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                }
            }

            .left-content {
                padding-top: 12px;

                .image-name {
                    padding-bottom: 11px;
                    font-weight: bold;
                    color: #333c48;
                    font-size: 16px;
                    max-width: 160px;
                    @mixin ellipsis;
                }

                .download-count {
                    text-align: center;
                    font-size: 12px;
                    font-family: MicrosoftYaHei;
                    color: rgba(115, 121, 135, 1);
                }
            }
        }

        .right-wrapper {
            width: calc(100% - 200px);
            max-width: calc(100% - 200px);
            height: 219px;
            float: right;
            font-size: 14px;

            .top-content {
                width: 100%;
                height: 50%;
                padding-top: 27px;
                padding-left: 30px;
                border-bottom: 1px solid rgba(221, 228, 235, 1);

                .updator {
                    float: left;

                    p:nth-child(1) {
                        color: #333c48;
                        padding-bottom: 14px;
                    }

                    p:nth-child(2) {
                        color: #737987;
                    }
                }

                .update-date {
                    float: left;
                    margin-left: 184px;

                    p:nth-child(1) {
                        color: #333c48;
                        padding-bottom: 14px;
                    }

                    p:nth-child(2) {
                        color: #737987;
                    }
                }
            }

            .bottom-content {
                width: 100%;
                height: 50%;
                padding-top: 27px;
                padding-left: 30px;

                p:nth-child(1) {
                    color: #333c48;
                    padding-bottom: 14px;
                }

                p:nth-child(2) {
                    color: #737987;
                }
            }
        }
    }

    .tag-count {
        margin-top: 20px;
        color: #737987;

        span {
            font-weight: bold;
            color: #333c48;
        }
    }
}

.biz-image-detail-table {
    border: 1px solid #e6e6e6;
    margin-top: 10px;

    p {
        margin: 0;
    }

    thead {
        background: #fafbfd;
    }

    tbody {
        tr {
            background: #fff;

            &:hover {
                background-color: #fafbfd !important;
            }

            .art-tag {
                display: inline-block;
                width: 72px;
                height: 22px;
                border-radius: 2px;
                width: 72px;
                font-size: 12px;
                font-family: MicrosoftYaHei;
                margin-right: 5px;
                text-align: center;
            }

            .dev-art {
                background: rgba(255, 243, 230, 1);
                border: 1px solid rgba(255, 180, 0, 1);
                color: rgba(255, 180, 0, 1);
            }

            .prod-art {
                background: rgba(236, 255, 243, 1);
                border: 1px solid rgba(48, 216, 120, 1);
                color: rgba(48, 216, 120, 1);
            }
        }

        .loading-row {
            width: 100%;
            height: 50px;
            border: 1px solid #e9edee;
            border-left: none;
            border-bottom: none;
            border-top: none;
            font-size: 14px;
            position: relative;

            .bk-loading-box .bk-loading-wrapper,
            .bk-loading .bk-loading-wrapper {
                top: 55%;
            }
        }

        .empty-row {
            position: relative;
            color: #737987;
            font-size: 12px;
            height: 40px;
            width: 100%;
            text-align: center;
            padding-top: 20px;
            border: none;
        }
    }

    .bk-message-box {
        min-height: 251px;
    }
}
